<template>
  <div class="detail-box">

    <el-descriptions border>
       <el-descriptions-item label="订单号">{{ data.id }}</el-descriptions-item>
      <el-descriptions-item label="老人姓名" :span='2'>{{ data.older_name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ data.older_sex | getSex }}</el-descriptions-item>
      <el-descriptions-item label="年龄">{{ data.age }} 岁</el-descriptions-item>
      <el-descriptions-item label="服务时长">{{ data.long_time | getServeTime }}</el-descriptions-item>
      <el-descriptions-item label="家庭住址" :span='3'>{{ data.address }}</el-descriptions-item>
      <el-descriptions-item label="上门时间" :span='1.5'>{{ data.start_time | getTime }}</el-descriptions-item>
      <el-descriptions-item label="签退时间" :span='1.5'>{{ data.end_time | getTime }}</el-descriptions-item>
      <el-descriptions-item label="任务内容" :span='3'>{{ data.task_type  }}</el-descriptions-item>
      <el-descriptions-item label="服务内容" :span='3'>{{ data.done_type || "暂无" }}</el-descriptions-item>

      <el-descriptions-item label="签到" :span='3'>
        <el-row v-if="data.start_photo" :gutter="10" style="flex: 1;">
          <el-col :span="6" v-for="(item,index) in data.start_photo" :key="index" >
            <img :src="item" @click="handleBigImg(item, data.start_photo, index)">
          </el-col>
        </el-row>
      </el-descriptions-item>

      <el-descriptions-item v-if="data.status !== '-2'" label="签退" :span='3'>
        <el-row v-if="data.end_photo" :gutter="10" style="flex: 1;">
          <el-col :span="6" v-for="(item,index) in data.end_photo" :key="index">
            <img :src="item" @click="handleBigImg(item, data.end_photo, index)">
          </el-col>
        </el-row>
      </el-descriptions-item>

      <el-descriptions-item v-else label="签退" :span='3'>
        <el-row v-if="data.feed_img" :gutter="10" style="flex: 1;">
          <el-col :span="6" v-for="(item,index) in data.feed_img" :key="index">
            <img :src="item" @click="handleBigImg(item, data.feed_img, index)">
          </el-col>
        </el-row>
      </el-descriptions-item>

       <el-descriptions-item v-if="data.status !== '-2'" label="备注信息" :span='3'>
        {{ data.remark }}
       </el-descriptions-item>

       <el-descriptions-item v-else label="备注信息" :span='3'>
        {{ data.feed_msg }}
       </el-descriptions-item>

       <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
         <span class="label-span">反馈图：</span>
         <img v-if="data.feed_img" :src="data.feed_img" @click="handleBigImg(data.feed_img)" alt="">
       </el-col> -->
    </el-descriptions>

    <el-dialog title="查看" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px" :append-to-body="true">
      <!-- <img width="100%" :src="dialogImageUrl" alt=""> -->
      <el-carousel ref="carousel" class="carouselDialog" :height="bannerHeight + 'px'" :autoplay="false" arrow="always" :initial-index="imgIndex">
          <el-carousel-item v-for="item in carouselOptions" :key="item">
             <img width="100%" :src="item" ref="bannerHeight" alt="">
          </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>
<script>
import { unixToDate, countTimeDown, sex } from "@/utils"
export default {
  name: 'order-info',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    getTime (value) {
      if (!value || value === '0') {
        return '未签'
      }
      return unixToDate(value)
    },
    getServeTime (value) {
      return countTimeDown(value)
    },
    getSex (value) {
      return sex(value)
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      carouselOptions:[],
      imgIndex:'',
      bannerHeight: 0
    }
  },
  methods: {
    imgLoad (options) {
          this.$nextTick(() => {
            const arr = []
            for (var i=0;i<options.length;i++){
               arr.push(this.$refs.bannerHeight[i].height)
            }
            // this.bannerHeight = this.$refs.bannerHeight[0].height
            // console.log(this.$refs)
            this.bannerHeight = Math.max(...arr)
          })
    },
    handleBigImg (img,options,imgIndex) {
      // this.dialogImageUrl = img
     this.carouselOptions = options;
     this.dialogVisible = true
     this.imgIndex = imgIndex;
     if (this.$refs.carousel) {
        this.$refs.carousel.setActiveItem(this.imgIndex);
     }
     this.imgLoad(options);
    }
  }
}
</script>

<style lang="scss">
  .detail-box .el-col{
    margin-bottom: 15px;
  }
  .detail-box div.label-span{
    font-size: 16px;
    color: #333;
    display: inline-block;
    width: 80px;
    text-align: right;
  }
  .detail-box div {
    font-size: 16px;
    color: #333;
    line-height: 30px;
  }
  .detail-box {
    img {
      width: 150px;
      height: 150px;
      vertical-align: text-top;
      cursor: pointer;
    }
  }
  .carouselDialog .el-carousel__arrow{
     background-color: #607d8b !important;
  }
</style>
